import { NavBar,List } from 'antd-mobile'
import React from 'react'
import tu from './img/image.png'
import { ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { payprice } from './request/api';
function App() {
  // 购买
  let tomai=()=>{
    payprice().then(res=>{
      console.log('pay',res)
    })
  }
  return (
    <div>
      <NavBar>订单</NavBar>
      <div >
        <h3>云南白药牙膏官方旗舰店</h3>
        <div style={{ display: 'flex', marginTop: '10px', alignItems: 'center' }}>
          <img style={{ width: '90px', height: '100px', borderRadius: '15px' }} src="https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60" alt="" />
          <div style={{ marginLeft: '30px' }}>
            <p>云南白药牙膏清新口腔两百忽</p>
            <br />
            <p>净含量：100g,颜色分类：【无效户口】国粹套餐</p>
            <br />
          </div>
          <div>
            <p>￥79</p>
          </div>
        </div>

        <List >
          <List.Item extra={
            <div>
             <p> 快递 免邮 送运费先</p>
             <p>预计 11月16日送达</p>
            </div>
          }>配送服务</List.Item>
          <List.Item extra={
            <div>
             <p> 组合优惠</p>
            
            </div>
          }>店铺优惠</List.Item>
          <List.Item extra={
            <div>
             <p> 本次不开具发票</p>
            
            </div>
          }>开具发票</List.Item>
          <List.Item extra={
            <div>
             <p> 无备注</p>
            
            </div>
          }>订单备注</List.Item>
        </List>
        <img src={tu} alt="" />
      </div>
      {/* 提交栏 */}
 <div className='demo-action-bar'>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => console.log('cart click')}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='立即购买'
          onClick={() =>tomai(79)}
        />
      </ActionBar>
    </div>
    </div>
  )
}

export default App
